<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI文书-日常管理-减免费用管理</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Microsoft YaHei', sans-serif; background: #f0f2f5; color: #333; min-height: 100vh; padding: 16px; }
        
        .container { background: white; border-radius: 8px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); max-width: 1600px; margin: 32px auto; }
        .page-title { font-size: 24px; font-weight: bold; color: #2c3e50; margin-bottom: 24px; }
        
        /* 筛选区域 */
        .filter-section { background: #fafafa; padding: 16px; border-radius: 4px; margin-bottom: 16px; }
        .filter-form { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; justify-content: space-between; }
        .filter-left { display: flex; gap: 16px; align-items: end; }
        .form-group { margin-bottom: 0; }
        .form-label { display: block; margin-bottom: 8px; color: #666; font-size: 14px; }
        .form-input, .form-select { width: 200px; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; background: white; }
        
        /* 按钮样式 */
        .btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; transition: all 0.3s; }
        .btn-primary { background: #1890ff; color: white; }
        .btn-primary:hover { background: #40a9ff; }
        .btn-reset { background: #f5f5f5; color: #666; border: 1px solid #ddd; }
        .btn-reset:hover { background: #e6f7ff; }
        .btn-success { background: #52c41a; color: white; }
        .btn-success:hover { background: #73d13d; }
        .btn-danger { background: #ff4d4f; color: white; }
        .btn-danger:hover { background: #ff7875; }
        .btn-group { display: flex; gap: 8px; }
        
        /* 统计区域 */
        .stats-section { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 8px; margin-bottom: 16px; color: white; }
        .stats-title { font-size: 16px; margin-bottom: 12px; opacity: 0.9; }
        .stats-amount { font-size: 28px; font-weight: bold; }
        .stats-amount .unit { font-size: 16px; font-weight: normal; margin-left: 4px; }
        
        /* 表格样式 */
        .table-container { overflow-x: auto; margin-bottom: 16px; }
        table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #e8e8e8; border-radius: 4px; }
        th, td { padding: 12px; text-align: left; border-bottom: 1px solid #e8e8e8; font-size: 14px; }
        th { background: #fafafa; font-weight: 500; color: #666; white-space: nowrap; }
        td { background: white; }
        tr:last-child td { border-bottom: none; }
        
        /* 金额列样式 */
        .amount-receivable { color: #1890ff; }
        .amount-received { color: #52c41a; }
        .amount-reduction { color: #ff4d4f; }
        
        /* 分页样式 */
        .pagination { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
        .page-item { padding: 4px 12px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; font-size: 14px; }
        .page-item.active { background: #1890ff; color: white; border-color: #1890ff; }
        .page-item:hover:not(.active) { background: #f5f5f5; }
        
        /* 弹窗样式 */
        .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }
        .modal-content { background-color: #fefefe; margin: 5% auto; padding: 0; border: none; border-radius: 8px; width: 500px; max-height: 90vh; overflow-y: auto; }
        .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid #e8e8e8; }
        .modal-title { font-size: 18px; font-weight: 500; color: #333; }
        .close { color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer; }
        .close:hover { color: #000; }
        .modal-body { padding: 24px; }
        .modal-footer { padding: 16px 24px; border-top: 1px solid #e8e8e8; display: flex; justify-content: flex-end; gap: 12px; }
        
        /* 表单样式 */
        .modal-form { display: flex; flex-direction: column; gap: 16px; }
        .modal-form-group { display: flex; flex-direction: column; gap: 8px; }
        .modal-form-label { font-size: 14px; color: #666; font-weight: 500; }
        .modal-form-input, .modal-form-select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
        .modal-form-input:focus, .modal-form-select:focus { outline: none; border-color: #1890ff; }
        .modal-form-input:read-only { background: #f5f5f5; color: #999; }
        
        /* 操作按钮 */
        .action-btn { padding: 4px 8px; margin: 0 2px; font-size: 12px; }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="page-title">减免费用管理</h1>
        
        <!-- 筛选区域 -->
        <div class="filter-section">
            <form class="filter-form" id="filterForm" onsubmit="event.preventDefault(); applyFilters();">
                <div class="filter-left">
                    <div class="form-group">
                        <label class="form-label">案件编号</label>
                        <input class="form-input" id="filterCaseNo" placeholder="请输入案件编号">
                    </div>
                </div>
                <div class="btn-group">
                    <button class="btn btn-primary" type="submit">查询</button>
                    <button class="btn btn-reset" type="button" onclick="resetFilters()">重置</button>
                    <button class="btn btn-success" type="button" onclick="openAddModal()">新增</button>
                </div>
            </form>
        </div>
        
        <!-- 统计区域 -->
        <div class="stats-section">
            <div class="stats-title">总减免金额</div>
            <div class="stats-amount" id="totalReduction">¥ 0.00<span class="unit">元</span></div>
        </div>
        
        <!-- 表格区域 -->
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>案件编号</th>
                        <th>应收费用(元)</th>
                        <th>实收费用(元)</th>
                        <th>减免金额(元)</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="dataTbody"></tbody>
            </table>
        </div>
        
        <!-- 分页 -->
        <div class="pagination" id="pagination"></div>
    </div>

    <!-- 新增减免弹窗 -->
    <div id="addReductionModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title">新增减免费用</span>
                <span class="close" onclick="closeAddModal()">&times;</span>
            </div>
            <div class="modal-body">
                <form class="modal-form" id="addReductionForm">
                    <div class="modal-form-group">
                        <label class="modal-form-label">案件编号 <span style="color: red;">*</span></label>
                        <select class="modal-form-select" id="caseNumber" required onchange="updateReceivableAmount()">
                            <option value="">请选择案件</option>
                            <option value="CASE-2023-011" data-amount="3500.00">CASE-2023-011 - 法医临床鉴定</option>
                            <option value="CASE-2023-012" data-amount="4200.00">CASE-2023-012 - 法医病理鉴定</option>
                            <option value="CASE-2023-013" data-amount="2800.00">CASE-2023-013 - 医疗损害鉴定</option>
                            <option value="CASE-2023-014" data-amount="3200.00">CASE-2023-014 - 法医毒物鉴定</option>
                            <option value="CASE-2023-015" data-amount="5500.00">CASE-2023-015 - 法医精神病鉴定</option>
                            <option value="CASE-2023-016" data-amount="2200.00">CASE-2023-016 - 法医物证鉴定</option>
                        </select>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">应收费用(元)</label>
                        <input class="modal-form-input" id="receivableAmount" placeholder="选择案件后自动带出" readonly>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">实收费用(元) <span style="color: red;">*</span></label>
                        <input class="modal-form-input" id="receivedAmount" type="number" step="0.01" min="0" placeholder="请输入实收费用" required oninput="calculateReduction()">
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">减免金额(元)</label>
                        <input class="modal-form-input" id="reductionAmount" placeholder="自动计算" readonly>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-reset" onclick="closeAddModal()">取消</button>
                <button class="btn btn-primary" onclick="submitReduction()">确定</button>
            </div>
        </div>
    </div>

    <script>
        // 模拟数据
        const mockData = [
            {
                id: 1, caseNo: 'CASE-2023-001', receivableAmount: 5000.00, receivedAmount: 4200.00, 
                reductionAmount: 800.00, createTime: '2023-01-15 10:30:00'
            },
            {
                id: 2, caseNo: 'CASE-2023-003', receivableAmount: 3500.00, receivedAmount: 2800.00, 
                reductionAmount: 700.00, createTime: '2023-02-10 14:20:00'
            },
            {
                id: 3, caseNo: 'CASE-2023-005', receivableAmount: 4200.00, receivedAmount: 3500.00, 
                reductionAmount: 700.00, createTime: '2023-02-25 09:15:00'
            },
            {
                id: 4, caseNo: 'CASE-2023-007', receivableAmount: 2800.00, receivedAmount: 2400.00, 
                reductionAmount: 400.00, createTime: '2023-03-08 16:45:00'
            },
            {
                id: 5, caseNo: 'CASE-2023-009', receivableAmount: 6000.00, receivedAmount: 5200.00, 
                reductionAmount: 800.00, createTime: '2023-03-20 11:30:00'
            }
        ];

        let filteredData = [...mockData];
        let currentPage = 1;
        const pageSize = 5;

        // 计算总减免金额
        function calculateTotalReduction() {
            const total = filteredData.reduce((sum, item) => sum + item.reductionAmount, 0);
            document.getElementById('totalReduction').innerHTML = `¥ ${total.toFixed(2)}<span class="unit">元</span>`;
        }

        // 渲染表格
        function renderTable() {
            const tbody = document.getElementById('dataTbody');
            tbody.innerHTML = '';
            
            const start = (currentPage - 1) * pageSize;
            const end = start + pageSize;
            const pageData = filteredData.slice(start, end);

            pageData.forEach((item, index) => {
                tbody.innerHTML += `
                    <tr>
                        <td>${start + index + 1}</td>
                        <td>${item.caseNo}</td>
                        <td class="amount-receivable">${item.receivableAmount.toFixed(2)}</td>
                        <td class="amount-received">${item.receivedAmount.toFixed(2)}</td>
                        <td class="amount-reduction">${item.reductionAmount.toFixed(2)}</td>
                        <td>${item.createTime}</td>
                        <td>
                            <button class="btn btn-danger action-btn" onclick="deleteReduction(${item.id})">删除</button>
                        </td>
                    </tr>
                `;
            });
        }

        // 渲染分页
        function renderPagination() {
            const total = filteredData.length;
            const pageCount = Math.ceil(total / pageSize);
            const container = document.getElementById('pagination');
            container.innerHTML = '';
            
            if (pageCount <= 1) return;

            // 上一页
            container.innerHTML += `<span class="page-item" onclick="gotoPage(${Math.max(1, currentPage - 1)})" ${currentPage === 1 ? 'style="color:#ccc;cursor:not-allowed;"' : ''}>上一页</span>`;
            
            // 页码
            for (let i = 1; i <= pageCount; i++) {
                container.innerHTML += `<span class="page-item ${i === currentPage ? 'active' : ''}" onclick="gotoPage(${i})">${i}</span>`;
            }
            
            // 下一页
            container.innerHTML += `<span class="page-item" onclick="gotoPage(${Math.min(pageCount, currentPage + 1)})" ${currentPage === pageCount ? 'style="color:#ccc;cursor:not-allowed;"' : ''}>下一页</span>`;
        }

        // 跳转页面
        function gotoPage(page) {
            const pageCount = Math.ceil(filteredData.length / pageSize);
            if (page < 1 || page > pageCount) return;
            currentPage = page;
            renderTable();
            renderPagination();
        }

        // 应用筛选
        function applyFilters() {
            const caseNo = document.getElementById('filterCaseNo').value.trim();
            
            filteredData = mockData.filter(item => 
                (!caseNo || item.caseNo.includes(caseNo))
            );
            
            currentPage = 1;
            renderTable();
            renderPagination();
            calculateTotalReduction();
        }

        // 重置筛选
        function resetFilters() {
            document.getElementById('filterForm').reset();
            filteredData = [...mockData];
            currentPage = 1;
            renderTable();
            renderPagination();
            calculateTotalReduction();
        }

        // 打开新增弹窗
        function openAddModal() {
            document.getElementById('addReductionModal').style.display = 'block';
        }

        // 关闭新增弹窗
        function closeAddModal() {
            document.getElementById('addReductionModal').style.display = 'none';
            document.getElementById('addReductionForm').reset();
        }

        // 更新应收费用
        function updateReceivableAmount() {
            const select = document.getElementById('caseNumber');
            const selectedOption = select.options[select.selectedIndex];
            const amount = selectedOption.getAttribute('data-amount') || '';
            document.getElementById('receivableAmount').value = amount;
            
            // 清空实收费用和减免金额
            document.getElementById('receivedAmount').value = '';
            document.getElementById('reductionAmount').value = '';
        }

        // 计算减免金额
        function calculateReduction() {
            const receivableAmount = parseFloat(document.getElementById('receivableAmount').value) || 0;
            const receivedAmount = parseFloat(document.getElementById('receivedAmount').value) || 0;
            
            if (receivableAmount > 0 && receivedAmount >= 0) {
                const reduction = Math.max(0, receivableAmount - receivedAmount);
                document.getElementById('reductionAmount').value = reduction.toFixed(2);
            } else {
                document.getElementById('reductionAmount').value = '';
            }
        }

        // 提交新增减免
        function submitReduction() {
            const form = document.getElementById('addReductionForm');
            if (!form.checkValidity()) {
                alert('请填写所有必填项');
                return;
            }

            const caseNo = document.getElementById('caseNumber').value;
            const receivableAmount = parseFloat(document.getElementById('receivableAmount').value);
            const receivedAmount = parseFloat(document.getElementById('receivedAmount').value);
            const reductionAmount = parseFloat(document.getElementById('reductionAmount').value) || 0;

            // 验证实收费用不能大于应收费用
            if (receivedAmount > receivableAmount) {
                alert('实收费用不能大于应收费用');
                return;
            }

            // 检查案件编号是否已存在
            if (mockData.some(item => item.caseNo === caseNo)) {
                alert('该案件已存在减免记录');
                return;
            }

            const newReduction = {
                id: mockData.length + 1,
                caseNo: caseNo,
                receivableAmount: receivableAmount,
                receivedAmount: receivedAmount,
                reductionAmount: reductionAmount,
                createTime: new Date().toLocaleString('zh-CN')
            };

            mockData.push(newReduction);
            alert('减免费用添加成功');
            closeAddModal();
            applyFilters();
        }

        // 删除减免记录
        function deleteReduction(id) {
            if (confirm('确定要删除此减免记录吗？')) {
                const index = mockData.findIndex(item => item.id === id);
                if (index !== -1) {
                    mockData.splice(index, 1);
                    alert('删除成功');
                    applyFilters();
                }
            }
        }

        // 点击弹窗外部关闭
        document.addEventListener('click', function(e) {
            if (e.target === document.getElementById('addReductionModal')) {
                closeAddModal();
            }
        });

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            renderTable();
            renderPagination();
            calculateTotalReduction();
        });
    </script>
</body>
</html> 